<template>
	<div id="Video_box">
		<LivePlayer v-if="!useDplayer" class="live_play" :videoUrl="videoUrl"   fluent autoplay live stretch></LivePlayer>
    <div v-if="useDplayer" id="dplayer" class="hy-player-wrapper"></div>
	</div>
</template>

<script>
  import LivePlayer from '@liveqing/liveplayer'

  import 'dplayer/dist/DPlayer.min.css'
  import DPlayer from 'dplayer'

	export default {
    name: 'Video',
    components: {
			LivePlayer
		},
		data() {
			return {
				videoUrl:'',
        useDplayer: false
			}
    },
    mounted(){
      this.videoUrl=this.$route.query.url
      if(this.useDplayer) this.initDplayer()
    },
		methods: {
      initDplayer: function(){
        this.dp = new DPlayer({
          container: document.getElementById('dplayer'),
          live: true,
          autoplay: true,
          video: {
              url: this.videoUrl,
          },
        })
      },// end initdplayer
		}
	}
</script>

<style lang="scss">
    .Video_box{
      .hy-player-wrapper{
        video {
          object-fit:fill;
        }
      }
    }
</style>
